<template>
	<view class="g-item">
		<view class="good-item" v-for="(item,index) in goodList" :key="index" @click="goDetail(item)">

			<view class="img-box">
				<u--image :showLoading="true" class="good-img" :src="item.image" width="330rpx" height="300rpx" mode="aspectFill">
					 <!-- <view slot="error" style="font-size: 24rpx;">加载失败</view> -->
					 <view slot="error" class="noPic">
						 <view class="iconfont icon-icon_noPhoto3 pic"></view>
						 <view class="tit">
						 	暂无图片
						 </view>
					 </view>
				</u--image>
			</view>

			<!-- <u--image :showLoading="true" class="good-img" :src="item.image"  width="330rpx" height="280rpx" mode="aspectFill"></u--image> -->

			<view class="good-intro">
				<view class="good-name">{{item.store_name}}</view>
				<view class="good-price">
					<view class="unit">￥</view>
					<view class="number">{{item.price}}</view>
				</view>
				<!-- <view class="good-other">
					<view class="good-saler">已售 {{item.sales}}</view>
					<view class="good-other-child">
						<u-icon name="share-square" size="26" color="#fff"></u-icon>
						<view class="ss">赚￥{{item.rate}}</view>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			goodList: {
				type: Array,
				default: function() {
					return [];
				}
			}
		},
		created() {

		},

		onShow() {

		},
		methods: {
			/* goDetail(item) {
				uni.navigateTo({
					url: '/pages/goods_details/index?id=' + item.product_id
				});
			}, */
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/store/ticket_details/index?storeID=${item.mer_id}&areaID=${item.product_id}`
				});
			}


		}
	}
</script>

<style lang="scss" scoped>
	.g-item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 20rpx;

		.good-item {
			width: 330rpx;
			margin-right: 30rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 0 6px 0 #e3eaf7;
			border-radius: 12px;
			background-color: #fff;
			overflow: hidden;

			.img-box {
				width: 330rpx;
				height: 300rpx;
				border-radius: 10rpx;
				.noPic{
					color: #ccc;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.pic{
						font-size: 80rpx;
					}
					.tit{
						font-size: 26rpx;
						margin-top: 14rpx;
					}
				}
			}

			.good-img {
				//border-bottom: 1px solid #eee;

			}

			.good-intro {
				padding: 20rpx;

				.good-name {
					font-size: 26rpx;
					color: #282828;
					// margin-top: 10rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					font-weight: bold;
				}

				.good-price {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: flex-end;
					margin-top: 6rpx;
					color: #fe8e41;

					.unit {
						font-size: 24rpx;
					}

					.number {
						font-size: 40rpx;
					}
				}

				.good-other {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					margin-top: 4rpx;

					.good-other-child {
						font-size: 24rpx;
						background-color: #ffc53e;
						color: #fff;
						text-align: center;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						padding: 6rpx 20rpx;
						border-radius: 20rpx;

						.ss {
							margin-left: 4rpx;
						}
					}

					.good-saler {
						color: #999999;
						font-size: 24rpx;
					}
				}
			}

		}

		.good-item:nth-child(even) {
			margin-right: 0;
		}
	}

	.main {
		background-color: fefefe;
	}

	.cart {
		position: fixed;
		right: 20rpx;
		bottom: 80rpx;

		.cart-box {
			position: relative;

			.cartNum {
				font-size: 20rpx;
				color: #fff;
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				z-index: 100;
				background-color: #fe8e41;
				height: 40rpx;
				width: 40rpx;
				text-align: center;
				border-radius: 40rpx;
				line-height: 40rpx;

			}
		}
	}

	.Scan {
		margin-left: 10rpx;
		padding-top: 10rpx;
	}
</style>